<template>
  <section>
    <el-collapse-transition>
      <section v-show="tableVisible" :style="topStyle">
        <slot name="bar"/>
        <slot name="table"/>
      </section>
    </el-collapse-transition>
    <el-collapse-transition>
      <div v-if="dialogVisible" >
        <slot name="popup-body"/>
      </div>
    </el-collapse-transition>
    <Loading :loading="globalLoading"/>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import Loading from "./loading.vue";

@Component({
  components: { Loading }
})
export default class BaseView extends Vue {
  @Prop({ default: false })
  protected globalLoading!: boolean;
  @Prop()
  protected popupTitle!: string;

  protected fullscreenBtnName: string = "全屏";
  protected tableVisible: boolean = true;
  protected dialogVisible: boolean = false;

  protected bottomStyle = {};

  protected topStyle = {
    maxHeight: "100%",
    overflow: "auto"
  };

  public pushdown() {
    this.tableVisible = true;
    this.dialogVisible = false;
    this.topStyle.maxHeight = "100%";
  }

  public popup() {
    this.dialogVisible = true;
    this.tableVisible = false;
    this.topStyle.maxHeight = "100%";
    this.fullscreenBtnName = "拆分窗口";
  }

  protected handleFullScreen(): void {
    // 全屏显示
    this.tableVisible = !this.tableVisible;
    if (this.tableVisible) {
      this.fullscreenBtnName = "全屏";
      this.topStyle.maxHeight = "50%";
    } else {
      this.fullscreenBtnName = "拆分窗口";
    }
  }
}
</script>
